<%@page language="java" pageEncoding="UTF-8"  contentType="text/html;utf-8" isELIgnored="false"%>
<html>
<script src="js/jquery-3.3.1.min.js"></script>

<style>

    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("./img/c.png") no-repeat center;
        background-size: 100%;
    }
    .register1{
        border: 1px solid black;
        width: 450px;
        height: 210px;
        margin: auto;
        margin-top: 150px;
        border-radius: 15px;
        padding-top: 25px;
    }
    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 12px;
    }
    #username,#password,#boxText{
        width: 265px;
        height: 40px;
        border: 1px solid darkgray;
        /*    设置边框属性为圆角*/
        border-radius: 5px;
        padding-left: 8px;
    }
    #boxText{
        width: 200px;
        height: 40px;
    }
    #image{
        width: 150px;
        height: 50px;
    }
    #checkcode{
        width: 80px;
        height: 40px;
        font-size: 15px;
    }
    #btn_reg{
        width: 120px;
        height: 35px;
        background-color: lemonchiffon;
        border: 0.5px solid darkgrey;
    }
</style>

<%--<script>
    &lt;%&ndash;    表单的校验&ndash;%&gt;
    function checkUsername(){
        var username = $("#username").val();
        var reg_username = /^\w{8,20}$/;

        var flag = reg_username.test(username);
        if (flag){
            //用户名和法
            $("#username").css("border","");
        }else{
            //用户名非法
            $("#username").css("border","2px solid red");
        }

        return flag;
    }

    function checkPassword(){

        var password = $("#password").val();
        var reg_password = /^\w{8,20}$/;

        var flag = reg_password.test(password);
        if (flag){
            //用户名和法
            $("#password").css("border","");
        }else{
            //用户名非法
            $("#password").css("border","1px solid red");
        }
        return flag;
    }

    $(
        function (){
            //当表单提交的时候，调用所有的校验方法
            $("#registerForm").submit(function (){
                //1.发送数据到服务器
                if(checkUsername()&&checkPassword()){
                    $.post("registUserServlet",$("#registerForm").serialize(),function (data){
                        //处理服务器响应的数据 data
                        if(data.flag){
                            //注册成功，跳转成功页面
                            location.href="register_ok.jsp";
                        }else{
                            //注册失败,给errorMsg添加提示信息
                            $("#errorMsg").html(data.errorMsg);

                        }
                    });
                }

                //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
                return false;

            });
            //当某一个组件失去焦点的时候，调用对应的校验方法
            $("#username").blur(checkUsername());
            $("#password").blur(checkPassword());
        }
    );


</script>--%>


<body>
<div class="register1">
    <form id="registerForm" action="registUserServlet" method="post">
        <table>
            <tr>
                <td class="td_left"><label for="username">用户名</label></td>
                <td class="td_right"><input type="text" name="username" placeholder="请输入用户名" id="username"></td>
            </tr>
            <tr>
                <td class="td_left"><label for="password">密码</label></td>
                <td class="td_right"><input type="password" name="password" placeholder="请输入密码" id="password"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" class = "submit" value="注册" id="btn_reg"></td>
            </tr>
            <tr>
<%--                <div colspan="2" id="errorMsg" style="color: yellowgreen" align="center"></div>--%>
                    <td colspan="2" align="center">
                        <%--                    <%=request.getAttribute("cc_error") == null ? "" : request.getAttribute("cc_error")%>--%>
                        <%--                    EL语句     --%>
                        ${requestScope.msg}
                    </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
